<template>
    <el-container class="dashboard-container">
        <!-- 主要内容区域 -->
        <el-main class="dashboard-main">
            <div style="text-align: left;" v-if="parkData.length > 1">
                <el-select v-model="selectedParkValue" placeholder="请选择园区" :clearable="true" style="width: 300px"
                    @change="handleSelectParkChange">
                    <!-- 循环展示查询回来的数组数据 -->
                    <el-option v-for="item in parkData" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                <el-divider style="margin: 10px 0;" />
            </div>
            <!-- 核心KPI指标卡片 -->
            <el-row :gutter="20" class="kpi-row">
                <el-col :span="4" :xs="12" :sm="8" :md="6" :lg="4">
                    <el-card class="kpi-card" style="background: linear-gradient(135deg, #fff7e6 0%, #ffe8cc 100%);">
                        <div class="kpi-title">已绑定园区</div>
                        <div class="kpi-value text-green">
                            {{ kpiData.parkTotal }}
                        </div>

                    </el-card>
                </el-col>
                <el-col :span="4" :xs="12" :sm="8" :md="6" :lg="4">
                    <el-card class="kpi-card" style="background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%)">
                        <div class="kpi-title">园区入住企业</div>
                        <p class="text-primary">
                            <span style="color: gray;">
                                审核中：{{ kpiData.enterprisePendingTotal }}
                            </span>
                        </p>
                        <p class="text-primary">
                            <span style="color: green;">
                                已入住：{{ kpiData.enterpriseApprovedTotal }}
                            </span>
                        </p>
                        <p class="text-primary">
                            <span style="color: red;">
                                已离园：{{ kpiData.enterpriseMovedOutTotal }}
                            </span>
                        </p>
                    </el-card>
                </el-col>
                <el-col :span="4" :xs="12" :sm="8" :md="6" :lg="4">
                    <el-card class="kpi-card" style="background: linear-gradient(135deg, #f9f2f2 0%, #f5f7fa 100%);">
                        <div class="kpi-title">园区合同信息</div>
                        <p class="text-primary">
                            <span style="color: green;">
                                <i class="el-icon-info"></i> 已签：{{ kpiData.signedContract }}
                            </span>
                        </p>
                        <p class="text-primary">
                            <span style="color: red;">
                                <i class="el-icon-info"></i> 未签：{{ kpiData.noSignedContract }}
                            </span>
                        </p>
                    </el-card>
                </el-col>
                <el-col :span="4" :xs="12" :sm="8" :md="6" :lg="4">
                    <el-card class="kpi-card" style="background-color: #f0fff4;">
                        <div class="kpi-title">园区房间使用率</div>
                        <div class="kpi-value"
                            :class="{ 'text-green': kpiData.spaceRate <= 90, 'text-red': kpiData.spaceRate > 90 }">
                            {{ kpiData.spaceRate }}%
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="4" :xs="12" :sm="8" :md="6" :lg="4">
                    <el-card class="kpi-card" style="background: linear-gradient(135deg, #f2f9f5 0%, #c8f0de 100%);">
                        <div class="kpi-title">园区收费总额</div>
                        <div class="kpi-value text-green">¥{{ kpiData.chargeTotal.toLocaleString() }}</div>
                    </el-card>
                </el-col>

                <el-col :span="4" :xs="12" :sm="8" :md="6" :lg="4">
                    <el-card class="kpi-card" style="background: linear-gradient(135deg, #f9f2f2 0%, #f0c8c8 100%);">
                        <div class="kpi-title">园区欠费总额</div>
                        <div class="kpi-value text-red">¥{{ kpiData.arrearageTotal }}</div>
                    </el-card>
                </el-col>
            </el-row>

            <!-- 园区管理模块图表 -->
            <el-row :gutter="20" class="chart-row">
                <el-col :span="12">
                    <el-card class="chart-card">
                        <div slot="header">园区入住企业统计</div>
                        <div class="chart-container">
                            <div ref="occupancyChart" class="chart"></div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card class="chart-card">
                        <div slot="header">园区空间使用效率</div>
                        <div class="chart-container">
                            <div ref="spaceUsageChart" class="chart"></div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>


            <!-- 企业管理模块图表 -->
            <el-row :gutter="20" class="chart-row">
                <el-col :span="12">
                    <el-card class="chart-card">
                        <div slot="header">园区企业产业分布</div>
                        <div class="chart-container">
                            <div ref="industryDistributionChart" class="chart"></div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card class="chart-card">
                        <div slot="header">园区企业类型分布</div>
                        <div class="chart-container">
                            <div ref="industryTypeChart" class="chart"></div>
                        </div>
                    </el-card>
                </el-col>

            </el-row>

            <el-row :gutter="20" class="chart-row">
                <el-col :span="12">
                    <el-card class="chart-card">
                        <div slot="header">园区企业营收TOP10</div>
                        <div class="chart-container">
                            <div ref="revenueTop10Chart" class="chart"></div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card class="chart-card">
                        <div slot="header">园区欠费企业TOP10</div>
                        <div class="chart-container">
                            <div ref="arrearsTop10Chart" class="chart"></div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

            <!-- 缴费管理模块图表 -->
            <el-row :gutter="20" class="chart-row">
                <el-col :span="12">
                    <el-card class="chart-card">
                        <div slot="header" class="card-header">
                            <span>园区企业历年收入和缴费趋势</span>
                            <el-select v-model="timeRange" placeholder="选择时间范围" class="time-select"
                                @change="handleTimeRangeChange">
                                <el-option label="近5年" value="5"></el-option>
                                <el-option label="近10年" value="10"></el-option>
                                <el-option label="全部年份" value="all"></el-option>
                            </el-select>
                        </div>

                        <!-- 图表容器 -->
                        <div class="chart-container">
                            <div ref="paymentRateChart" class="chart"></div>
                        </div>

                        <!-- 数据统计卡片 -->
                        <div class="stats-container">
                            <el-statistic v-for="(stat, index) in statistics" :key="index" class="stat-card"
                                :title="stat.title" :value="stat.value" :precision="2" value-style="color: #409EFF">
                                <template #prefix>
                                    <el-icon :size="15">
                                        <money />
                                    </el-icon>
                                </template>
                                <template #suffix>元</template>
                            </el-statistic>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card class="chart-card">
                        <div slot="header">园区分类型缴费金额</div>
                        <div class="chart-container">
                            <div ref="paymentTypeChart" class="chart"></div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
import { ElMessage, ElLoading } from 'element-plus';
import request from '@/api/request'


const parkData = ref([])
const selectedParkValue = ref('')//入住企业总数

// 页面挂载时初始化图表及数据
onMounted(() => {
    //查询所属园区信息
    fetchParkData()
    //查询上面的统计卡片数据
    loadCardTtoal()
    initCharts()
    loadData();


});

// 核心KPI数据
const kpiData = ref({
    parkTotal: 0,//园区数
    spaceRate: 0,//空间利用率
    chargeTotal: 0,//收费总额
    arrearageTotal: 0,//欠费费总额
    enterprisePendingTotal: 0,//入住审核中：企业总数
    enterpriseApprovedTotal: 0,//入住已入住：企业总数
    enterpriseMovedOutTotal: 0,//入住已离园：企业总数
    signedContract: 0,//已签合同
    noSignedContract: 0//未签合同
});

const parkId = ref(null)
const loadCardTtoal = async () => {
    const res = await request.get('dashboard/getData', {
        params: {
            parkId: parkId.value
        }
    })
    if (res.success) {
        kpiData.value.parkTotal = res.data.parkTotal

        kpiData.value.enterprisePendingTotal = res.data.enterprisePendingTotal == null ? 0 : res.data.enterprisePendingTotal
        kpiData.value.enterpriseApprovedTotal = res.data.enterpriseApprovedTotal == null ? 0 : res.data.enterpriseApprovedTotal
        kpiData.value.enterpriseMovedOutTotal = res.data.enterpriseMovedOutTotal == null ? 0 : res.data.enterpriseMovedOutTotal
        kpiData.value.signedContract = res.data.signedContract == null ? 0 : res.data.signedContract
        kpiData.value.noSignedContract = res.data.noSignedContract == null ? 0 : res.data.noSignedContract

        kpiData.value.spaceRate = res.data.spaceRate
        kpiData.value.chargeTotal = res.data.chargeTotal
        kpiData.value.arrearageTotal = res.data.arrearageTotal
    }
}

// 处理选中变化
const handleSelectParkChange = (value) => {
    parkId.value = value
    loadCardTtoal()
    loadData()
};

// 时间范围选择
const timeRange = ref('5');

// 图表数据
const chartData = ref({
    years: [],
    payable: [],    // 应缴总额
    paid: [],       // 已缴总额
    arrears: []     // 欠缴总额
});

// 统计数据
const statistics = ref([
    { title: '累计应缴总额', value: 0 },
    { title: '累计已缴总额', value: 0 },
    { title: '累计欠缴总额', value: 0 }
]);

// 图表容器引用
const occupancyChart = ref(null);
const spaceUsageChart = ref(null);
const industryDistributionChart = ref(null);
const industryTypeChart = ref(null);
const revenueTop10Chart = ref(null);
const paymentRateChart = ref(null);
const paymentTypeChart = ref(null);
const arrearsTop10Chart = ref(null);


const loadData = async () => {
    //查询园区入住
    try {
        const res = await request.get('dashboard/getEnterprise', {
            params: {
                parkId: parkId.value
            }
        })
        if (res.success) {
            dashData.occupancyData = res.data
        }
    } catch (error) {
        ElMessage.error("数据获取失败")
        console.error('获取数据失败:', error);
    }
    //空间使用率
    try {
        const spaceUsageData = await request.get('dashboard/getSpaceUsageData', {
            params: {
                parkId: parkId.value
            }
        })
        if (spaceUsageData.success) {
            dashData.spaceUsageData = spaceUsageData.data
        }
    } catch (error) {
        console.error('获取数据失败:', error);
    }
    try {
        //企业产业分布
        const industryDistributionData = await request.get('dashboard/getIndustryDistributionData', {
            params: {
                parkId: parkId.value,
                type: 1
            }
        })
        if (industryDistributionData.success) {
            dashData.industryDistributionData = industryDistributionData.data
        }
    } catch (error) {
        console.error('获取数据失败:', error);
    }
    try {
        //企业类型分布
        const industryTypData = await request.get('dashboard/getIndustryDistributionData', {
            params: {
                parkId: parkId.value,
                type: 2
            }
        })
        if (industryTypData.success) {
            dashData.industryTypData = industryTypData.data
        }
    } catch (error) {
        console.error('获取数据失败:', error);
    }
    try {
        //企业营收TOP10
        const revenueTop10Data = await request.get('dashboard/getRevenueTop10Data', {
            params: {
                parkId: parkId.value,
                type: 1
            }
        })
        if (revenueTop10Data.success) {
            dashData.revenueTop10Data = revenueTop10Data.data
        }
    } catch (error) {
        console.error('获取数据失败:', error);
    }
    try {
        const arrearsTop10Data = await request.get('dashboard/getRevenueTop10Data', {
            params: {
                parkId: parkId.value,
                type: 2
            }
        })
        if (arrearsTop10Data.success) {
            dashData.arrearsTop10Data = arrearsTop10Data.data
        }
    } catch (error) {
        console.error('获取数据失败:', error);
    }
    try {
        //企业历年收入和缴费趋势
        const paymentRate = await request.get('/dashboard/getPaymentRate', {
            params: {
                parkId: parkId.value,
                timeRange: timeRange.value
            }
        });
        const data = paymentRate.data ?? [];
        // 处理图表数据
        chartData.value.years = data.map(item => item.year);
        chartData.value.payable = data.map(item => item.totalPayable);
        chartData.value.paid = data.map(item => item.totalPaid);
        chartData.value.arrears = data.map(item => item.totalArrears);
        // 计算统计数据
        calculateStatistics(data);
    } catch (error) {
        console.error('获取数据失败:', error);
    }

    try {
        //企业历年收入和缴费趋势
        const paymentTypeData = await request.get('/dashboard/getPaymentType', {
            params: {
                parkId: parkId.value
            }
        });
        dashData.paymentTypeData = paymentTypeData.data ?? [];
    } catch (error) {
        console.error('获取数据失败:', error);
    }


    initChartsData()

}
// 数据
const dashData = {
    // 园区管理模块数据
    occupancyData: {
        building: [''],
        rate: [0]
    },
    spaceUsageData: {
        categories: [''],
        usedArea: [0],
        idleArea: [0]
    },

    // 企业管理模块数据
    industryDistributionData: {
        industries: [''],
        count: [0]
    },
    industryTypData: {
        industries: [''],
        count: [0]
    },
    revenueTop10Data: {
        companies: [''],
        revenue: [0]
    },
    arrearsTop10Data: {
        companies: [''],
        revenue: [0]
    },
    // 缴费管理模块数据
    paymentTypeData: {
        feeType: [''],
        totalPayable: [0],
        totalPaid: [0],
        totalArrears: [0]
    },

};
let occupancyInstance = null;
let spaceUsageInstance = null;
let industryDistributionInstance = null;
let industryTypeChartInstance = null;
let revenueTop10Instance = null;
let paymentRateInstance = null;
let paymentTypeInstance = null;
let arrearsTop10Instance = null;

// 初始化图表
const initCharts = () => {
    // 园区入驻率统计 - 柱状图
    occupancyInstance = echarts.init(occupancyChart.value);
    // 空间使用效率 - 堆叠柱状图
    spaceUsageInstance = echarts.init(spaceUsageChart.value);

    // 企业产业分布 - 饼图
    industryDistributionInstance = echarts.init(industryDistributionChart.value);
    //企业类型
    industryTypeChartInstance = echarts.init(industryTypeChart.value);
    // 企业年度营收TOP10 - 条形图
    revenueTop10Instance = echarts.init(revenueTop10Chart.value);
    // 缴费率统计 - 折线图
    paymentRateInstance = echarts.init(paymentRateChart.value);
    // 分类型缴费金额 - 堆叠柱状图
    paymentTypeInstance = echarts.init(paymentTypeChart.value);
    // 欠费企业TOP10 - 条形图
    arrearsTop10Instance = echarts.init(arrearsTop10Chart.value);



    // 响应窗口大小变化
    window.addEventListener('resize', () => {
        occupancyInstance.resize();
        spaceUsageInstance.resize();
        industryDistributionInstance.resize();
        industryTypeChartInstance.resize();
        revenueTop10Instance.resize();
        paymentRateInstance.resize();
        paymentTypeInstance.resize();
        arrearsTop10Instance.resize();

    });
};

const initChartsData = () => {
    occupancyInstance.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' }
        },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: { type: 'category', data: dashData.occupancyData.building },
        yAxis: { type: 'value', max: 100, axisLabel: { formatter: '{value}' } },
        series: [{
            name: '入驻企业',
            type: 'bar',
            data: dashData.occupancyData.rate,
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#409eff' },
                    { offset: 1, color: '#6aa8ff' }
                ])
            }
        }]
    });

    spaceUsageInstance.setOption({
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        legend: { data: ['已用面积', '空闲面积'], top: 'top' },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: { type: 'category', data: dashData.spaceUsageData.categories },
        yAxis: { type: 'value', axisLabel: { formatter: '{value} %' } },
        series: [
            { name: '已用面积', type: 'bar', stack: 'total', data: dashData.spaceUsageData.usedArea, itemStyle: { color: '#409eff' } },
            { name: '空闲面积', type: 'bar', stack: 'total', data: dashData.spaceUsageData.idleArea, itemStyle: { color: '#f56c6c' } }
        ]
    });
    industryDistributionInstance.setOption({
        tooltip: { trigger: 'item' },
        legend: { orient: 'vertical', left: 5, data: dashData.industryDistributionData.industries },
        series: [{
            name: '企业数量',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: { show: false, position: 'center' },
            emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
            labelLine: { show: false },
            data: dashData.industryDistributionData.industries.map((industry, index) => ({
                value: dashData.industryDistributionData.count[index],
                name: industry
            }))
        }]
    });
    industryTypeChartInstance.setOption({
        tooltip: { trigger: 'item' },
        legend: { orient: 'vertical', left: 5, data: dashData.industryTypData.industries },
        series: [{
            name: '企业数量',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: { show: false, position: 'center' },
            emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
            labelLine: { show: false },
            data: dashData.industryTypData.industries.map((industry, index) => ({
                value: dashData.industryTypData.count[index],
                name: industry
            }))
        }]
    });

    revenueTop10Instance.setOption({
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: { type: 'value', axisLabel: { formatter: '{value} 万' } },
        yAxis: {
            axisLabel: {
                formatter: function (value) {
                    const maxLength = 8; // 超过 8 个字则省略
                    return value.length > maxLength
                        ? value.substring(0, maxLength) + '...'
                        : value;
                }
            },
            type: 'category',
            data: dashData.revenueTop10Data.companies,
            inverse: true
        },
        series: [{
            name: '年度营收',
            type: 'bar',
            data: dashData.revenueTop10Data.revenue,
            itemStyle: { color: '#409eff' }
        }]
    });
    arrearsTop10Instance.setOption({
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        yAxis: { type: 'value', axisLabel: { formatter: '{value} 元' } },
        xAxis: {
            type: 'category',
            data: dashData.arrearsTop10Data.companies,
            inverse: true
        },
        series: [{
            name: '欠费金额',
            type: 'bar',
            data: dashData.arrearsTop10Data.revenue,
            itemStyle: { color: '#f56c6c' }
        }]
    });

    paymentRateInstance.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function (params) {
                let result = params[0].name + '<br/>';
                params.forEach(item => {
                    result += `${item.seriesName}: ${item.value.toFixed(2)} 元<br/>`;
                });
                return result;
            }
        },
        legend: {
            data: ['应缴总额', '已缴总额', '欠缴总额'],
            top: 0
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: chartData.value.years,
            axisLabel: {
                interval: 0,
                rotate: 30
            }
        },
        yAxis: {
            type: 'value',
            name: '金额 (元)',
            axisLabel: {
                formatter: '{value}'
            }
        },
        series: [
            {
                name: '应缴总额',
                type: 'line',
                data: chartData.value.payable,
                smooth: true,
                symbol: 'circle',
                symbolSize: 8,
                lineStyle: {
                    width: 2
                },
                itemStyle: {
                    color: '#67C23A'
                }
            },
            {
                name: '已缴总额',
                type: 'line',
                data: chartData.value.paid,
                smooth: true,
                symbol: 'circle',
                symbolSize: 8,
                lineStyle: {
                    width: 2
                },
                itemStyle: {
                    color: '#409EFF'
                }
            },
            {
                name: '欠缴总额',
                type: 'line',
                data: chartData.value.arrears,
                smooth: true,
                symbol: 'circle',
                symbolSize: 8,
                lineStyle: {
                    width: 2
                },
                itemStyle: {
                    color: '#F56C6C'
                }
            }
        ]
    });
    paymentTypeInstance.setOption({
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        legend: { data: ['应缴金额', '已缴金额', '欠缴金额'], top: 'top' },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: { type: 'category', data: dashData.paymentTypeData.feeType },
        yAxis: { type: 'value', axisLabel: { formatter: '{value} 元' } },
        series: [
            { name: '应缴金额', type: 'bar', stack: 'total', data: dashData.paymentTypeData.totalPayable, itemStyle: { color: '#409eff' } },
            { name: '已缴金额', type: 'bar', stack: 'total', data: dashData.paymentTypeData.totalPaid, itemStyle: { color: '#67c23a' } },
            { name: '欠缴金额', type: 'bar', stack: 'total', data: dashData.paymentTypeData.totalArrears, itemStyle: { color: '#e6a23c' } }
        ]
    });
}
// 时间范围变化处理
const handleTimeRangeChange = () => {
    loadData();
};
// 计算统计数据
const calculateStatistics = (data) => {
    statistics.value[0].value = data.reduce((sum, item) => sum + Number(item.totalPayable), 0);
    statistics.value[1].value = data.reduce((sum, item) => sum + Number(item.totalPaid), 0);
    statistics.value[2].value = data.reduce((sum, item) => sum + Number(item.totalArrears), 0);
};

const fetchParkData = async () => {
    const loading = ElLoading.service({
        lock: true,
        text: '正在初始化页面数据...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    try {
        const myPartData = await request.get('park/page', {
            params: {
                pageNum: 1,
                pageSize: 999
            }
        })
        if (myPartData.success) {
            // 假设后端返回格式：{ list: [...园区数据...], total: 100 }
            // 直接替换 parkData 的内容（保持响应式）
            // parkData.splice(0, parkData.length, ...data.list);
            // 同时将数据返回给子组件
            parkData.value = [...myPartData.data.list]
        }
    } catch (err) {
        parkData.value = []; // 出错时清空数据
    } finally {
        loading.close()
    }
}
</script>

<style scoped>
.dashboard-container {
    height: 100vh;
    overflow: auto;
}

.dashboard-header {
    background-color: #fff;
    padding: 0 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.dashboard-header h1 {
    line-height: 60px;
    margin: 0;
    color: #333;
    font-size: 1.5rem;
}

.dashboard-main {
    padding: 20px;
    background-color: #f5f7fa;
}

.kpi-row {
    margin-bottom: 20px;
}

.kpi-card {
    height: 100%;
    width: 100%;
    background-color: #fff;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kpi-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.kpi-title {
    color: #666;
    font-size: 14px;
    margin-bottom: 8px;
    text-align: center;
    /* 文字过长时省略（单行） */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.kpi-value {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
    text-align: center;
    /* 极长数字允许换行（多行） */
    word-break: break-all;
}


.text-green {
    color: #5fc92b;
}

.text-red {
    color: #f56c6c;
}

.chart-row {
    margin-bottom: 20px;
}

.chart-card {
    background-color: #fff;
    height: 100%;
}

.chart-container {
    width: 100%;
    height: 350px;
    padding-top: 10px;
}

.chart {
    width: 100%;
    height: 100%;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time-select {
    width: 140px;
}

.chart-container {
    width: 100%;
    height: 450px;
    margin-bottom: 20px;
}

.chart {
    width: 100%;
    height: 100%;
}

.stats-container {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.stat-card {
    width: 30%;
    text-align: center;
}

.text-primary {
    font-size: 12px;
}
</style>
